
                <!--Page content-->
                <!--===================================================-->
                <div id="page-content">
                    
					
					<div class="panel">
					    <div class="panel-heading">
					        <h3 class="panel-title">Basic Example</h3>
					    </div>
					
					    <!-- Alert types -->
					    <div class="panel-body demo-nifty-alert">
					        <p class="pad-btm">Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
					        <div class="row">
					            <div class="col-sm-6">
					
					                <!-- Primary Alert -->
					                <!--===================================================-->
					                <div class="alert alert-primary">
					                    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
					                </div>
					
					                <!-- Success Alert -->
					                <!--===================================================-->
					                <div class="alert alert-success">
					                    <strong>Well done!</strong> You successfully read this important alert message.
					                </div>
					
					                <!-- Info Alert -->
					                <!--===================================================-->
					                <div class="alert alert-info">
					                    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
					                </div>
					
					                <!-- Warning Alert -->
					                <!--===================================================-->
					                <div class="alert alert-warning">
					                    <strong>Warning!</strong> Better check yourself, you're not looking too good.
					                </div>
					
					                <!-- Danger Alert -->
					                <!--===================================================-->
					                <div class="alert alert-danger">
					                    <strong>Oh snap!</strong> Change a few things up and try submitting again.
					                </div>
					
					            </div>
					            <div class="col-sm-6">
					
					                <!-- Mint Alert -->
					                <!--===================================================-->
					                <div class="alert alert-mint">
					                    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
					                </div>
					
					                <!-- Purple Alert -->
					                <!--===================================================-->
					                <div class="alert alert-purple">
					                    <strong>Warning!</strong> Better check yourself, you're not looking too good.
					                </div>
					
					                <!-- Pink Alert -->
					                <!--===================================================-->
					                <div class="alert alert-pink">
					                    <strong>Oh snap!</strong> Change a few things up and try submitting again.
					                </div>
					
					                <!-- Dark Alert -->
					                <!--===================================================-->
					                <div class="alert alert-dark">
					                    <strong>Well done!</strong> You successfully read this important alert message.
					                </div>
					            </div>
					        </div>
					    </div>
					</div>
					
					<div class="panel">
					    <div class="panel-heading">
					        <h3 class="panel-title">Dismissible Alerts</h3>
					    </div>
					
					    <!-- Alert types -->
					    <div class="panel-body demo-nifty-alert">
					        <p class="pad-btm">Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
					        <div class="row">
					            <div class="col-sm-6">
					
					                <!-- Primary Alert -->
					                <!--===================================================-->
					                <div class="alert alert-primary">
					                    <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
					                    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
					                </div>
					
					                <!-- Success Alert -->
					                <!--===================================================-->
					                <div class="alert alert-success">
					                    <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
					                    <strong>Well done!</strong> You successfully read this important alert message.
					                </div>
					
					                <!-- Info Alert -->
					                <!--===================================================-->
					                <div class="alert alert-info">
					                    <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
					                    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
					                </div>
					
					                <!-- Warning Alert -->
					                <!--===================================================-->
					                <div class="alert alert-warning">
					                    <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
					                    <strong>Warning!</strong> Better check yourself, you're not looking too good.
					                </div>
					
					                <!-- Danger Alert -->
					                <!--===================================================-->
					                <div class="alert alert-danger">
					                    <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
					                    <strong>Oh snap!</strong> Change a few things up and try submitting again.
					                </div>
					
					            </div>
					            <div class="col-sm-6">
					
					                <!-- Mint Alert -->
					                <!--===================================================-->
					                <div class="alert alert-mint">
					                    <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
					                    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
					                </div>
					
					                <!-- Purple Alert -->
					                <!--===================================================-->
					                <div class="alert alert-purple">
					                    <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
					                    <strong>Warning!</strong> Better check yourself, you're not looking too good.
					                </div>
					
					                <!-- Pink Alert -->
					                <!--===================================================-->
					                <div class="alert alert-pink">
					                    <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
					                    <strong>Oh snap!</strong> Change a few things up and try submitting again.
					                </div>
					
					                <!-- Dark Alert -->
					                <!--===================================================-->
					                <div class="alert alert-dark">
					                    <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
					                    <strong>Well done!</strong> You successfully read this important alert message.
					                </div>
					            </div>
					        </div>
					    </div>
					</div>
					
					
					<div class="panel">
					    <div class="panel-heading">
					        <h3 class="panel-title">Links in alerts</h3>
					    </div>
					
					    <!-- Alert types -->
					    <div class="panel-body demo-nifty-alert">
					        <p class="pad-btm">Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
					        <div class="row">
					            <div class="col-sm-6">
					
					                <!-- Primary Alert -->
					                <!--===================================================-->
					                <div class="alert alert-primary">
					                    <strong>Heads up!</strong> This alert needs <a href="#" class="alert-link">your attention</a>, but it's not super important.
					                </div>
					
					                <!-- Success Alert -->
					                <!--===================================================-->
					                <div class="alert alert-success">
					                    <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message.</a>
					                </div>
					
					                <!-- Info Alert -->
					                <!--===================================================-->
					                <div class="alert alert-info">
					                    <strong>Heads up!</strong> This alert <a href="#" class="alert-link">needs your attention</a>, but it's not super important.
					                </div>
					
					                <!-- Warning Alert -->
					                <!--===================================================-->
					                <div class="alert alert-warning">
					                    <strong>Warning!</strong> Better check yourself, <a href="#" class="alert-link">you're not looking too good.</a>
					                </div>
					
					                <!-- Danger Alert -->
					                <!--===================================================-->
					                <div class="alert alert-danger">
					                    <strong>Oh snap!</strong> Change a few things up and try <a href="#" class="alert-link">submitting again.</a>
					                </div>
					
					            </div>
					            <div class="col-sm-6">
					
					                <!-- Mint Alert -->
					                <!--===================================================-->
					                <div class="alert alert-mint">
					                    <strong>Heads up!</strong> This alert <a href="#" class="alert-link">needs your attention</a>, but it's not super important.
					                </div>
					
					                <!-- Purple Alert -->
					                <!--===================================================-->
					                <div class="alert alert-purple">
					                    <strong>Warning!</strong> Better <a href="#" class="alert-link">check yourself</a>, you're not looking too good.
					                </div>
					
					                <!-- Pink Alert -->
					                <!--===================================================-->
					                <div class="alert alert-pink">
					                    <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
					                </div>
					
					                <!-- Dark Alert -->
					                <!--===================================================-->
					                <div class="alert alert-dark">
					                    <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
					                </div>
					            </div>
					        </div>
					    </div>
					</div>
					
					<hr class="new-section-sm">
					
					<div class="row">
					
					    <!--Tooltips-->
					    <!--===================================================-->
					
					    <div class="col-lg-6">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Tooltips</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Tooltip Example-->
					                <p class="muted">
					                    Lorem ipsum dolor sit amet <a class="btn-link text-semibold add-tooltip" data-toggle="tooltip" href="#" data-original-title="Default tooltip">consectetuer</a>
					                    adipiscing elit, <a class="btn-link text-semibold add-tooltip" data-toggle="tooltip" href="#" data-original-title="Another tooltip"> sed diam nonummy</a>
					                    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
					                    <a class="btn-link text-semibold add-tooltip" data-toggle="tooltip" href="#" data-original-title="The last tip!">quis nostrud</a>.
					                </p>
					                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
					
					            </div>
					        </div>
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Four directions</h3>
					            </div>
					            <div class="panel-body demo-nifty-btn">
					
					                <!--Tooltip directions-->
					                <button class="btn btn-default add-tooltip" data-toggle="tooltip" data-container="body" data-placement="left" data-original-title="Tooltip on left">Tooltip on left</button>
					                <button class="btn btn-default add-tooltip" data-toggle="tooltip" data-container="body" data-placement="top" data-original-title="Tooltip on top">Tooltip on top</button>
					                <button class="btn btn-default add-tooltip" data-toggle="tooltip" data-container="body" data-placement="bottom" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
					                <button class="btn btn-default add-tooltip" data-toggle="tooltip" data-container="body" data-placement="right" data-original-title="Tooltip on right">Tooltip on right</button>
					                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
					
					            </div>
					        </div>
					    </div>
					    <!--===================================================-->
					
					
					
					    <!--POPOVERS-->
					    <!--===================================================-->
					    <div class="col-lg-6">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Dismissible popover</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Dismissible popover-->
					                <a href="#popover" class="btn btn-lg btn-warning add-popover" data-original-title="Bootstrap Popover" data-content="it's so simple to create a tooltop for my website!" data-placement="top" data-trigger="focus" data-toggle="popover">Dismissible popover</a>
					                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
					
					            </div>
					        </div>
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Four directions</h3>
					            </div>
					            <div class="panel-body demo-nifty-btn">
					                <!--Popover directions-->
					                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
					                <button class="btn btn-default btn-active-success add-popover" data-toggle="popover" data-container="body" data-placement="left" data-original-title="Bootstrap Popover" data-content="Lorem ipsum dolor sit amet, consec tetuer adipiscing elit.">Popover on left</button>
					                <button class="btn btn-default btn-active-success add-popover" data-toggle="popover" data-container="body" data-placement="top" data-original-title="Bootstrap Popover" data-content="Lorem ipsum dolor sit amet, consec tetuer adipiscing elit.">Popover on top</button>
					                <button class="btn btn-default btn-active-success add-popover" data-toggle="popover" data-container="body" data-placement="bottom" data-original-title="Bootstrap Popover" data-content="Lorem ipsum dolor sit amet, consec tetuer adipiscing elit.">Popover on bottom</button>
					                <button class="btn btn-default btn-active-success add-popover" data-toggle="popover" data-container="body" data-placement="right" data-original-title="Bootstrap Popover" data-content="Lorem ipsum dolor sit amet, consec tetuer adipiscing elit.">Popover on right</button>
					                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
					            </div>
					        </div>
					    </div>
					</div>
					
					
					
                </div>
                <!--===================================================-->
                <!--End page content-->
<script>


$(document).ready(function() {

 // [ DEMO ] GENERATE RANDOM ALERTS
 // =================================================================
 var dataAlert = [{
         type : "info"
     },{
         type : "primary"
     },{
         type : "success"
     },{
         type : "warning"
     },{
         type : "danger"
     },{
         type : "mint"
     },{
         type : "purple"
     },{
         type : "pink"
     },{
         type : "dark"
     }
 ],
 alertContent = $('#demo-preview-alert-1').find('.alert').html(),
 autoClose = true;
 $('#demo-alert-close-1').on('nifty.ch.checked', function(){
     autoClose = true;
 });
 $('#demo-alert-close-2').on('nifty.ch.checked', function(){
     autoClose = false;
 });
 // =================================================================



 // PAGE ALERTS
 // =================================================================
 // Require Nifty Admin Javascript
 // http://www.themeon.net/
 // =================================================================
 $('#demo-alert-page').on('click', function(){
     dataNum = nifty.randomInt(0,8);
     contentHTML = alertContent.replace("btn-danger", "btn-"+dataAlert[dataNum].type);
     $.niftyNoty({
         type: dataAlert[dataNum].type,
         container : 'page',
         html : contentHTML,
         timer : autoClose ? 5000 : 0
     });
 });


 // PANEL ALERTS
 // =================================================================
 // Require Nifty Admin Javascript
 // http://www.themeon.net/
 // =================================================================
 $('#demo-alert-panel').on('click', function(){
     var dataNum = nifty.randomInt(0,8);
     var contentHTML = alertContent.replace("btn-danger", "btn-"+dataAlert[dataNum].type);

     $.niftyNoty({
         type: dataAlert[dataNum].type,
         container : '#demo-panel-alert',
         html : contentHTML,
         focus: false,
         timer : autoClose ? 3000 : 0
     });

     dataNum = nifty.randomInt(0,8);
     contentHTML = alertContent.replace("btn-danger", "btn-"+dataAlert[dataNum].type);

     $.niftyNoty({
         type: dataAlert[dataNum].type,
         container : '#demo-basic-panel-alert',
         html : contentHTML,
         focus: false,
         timer : autoClose ? 3000 : 0
     });
 });


 // GROW-LIKE / FLOATING ALERTS
 // =================================================================
 // Require Nifty Admin Javascript
 // http://www.themeon.net/
 // =================================================================
 $('#demo-alert-noty').on('click', function(){
     dataNum = nifty.randomInt(0,8);
     contentHTML = alertContent.replace("btn-danger", "btn-"+dataAlert[dataNum].type);

     $.niftyNoty({
         type: dataAlert[dataNum].type,
         container : 'floating',
         html : contentHTML,
         timer : autoClose ? 3000 : 0
     });
 });


 // [ DEMO ] ALERT SELECTOR
 // =================================================================
 var prevAlert = $('.demo-preview-alert');
 prevAlert.hide();
 $('#demo-preview-alert-1').fadeIn(300);
 $('#demo-alert-type-1').on('nifty.ch.checked', function(){
     prevAlert.hide();
     alertContent = $('#demo-preview-alert-1').find('.alert').html();
     $('#demo-preview-alert-1').fadeIn(300);
 }).niftyCheck('toggleOn');

 $('#demo-alert-type-2').on('nifty.ch.checked', function(){
     prevAlert.hide();
     alertContent = $('#demo-preview-alert-2').find('.alert').html();
     $('#demo-preview-alert-2').fadeIn(300);
 });

 $('#demo-alert-type-3').on('nifty.ch.checked', function(){
     prevAlert.hide();
     alertContent = $('#demo-preview-alert-3').find('.alert').html();
     $('#demo-preview-alert-3').fadeIn(300);
 });

 $('#demo-alert-type-4').on('nifty.ch.checked', function(){
     prevAlert.hide();
     alertContent = $('#demo-preview-alert-4').find('.alert').html();

     $('#demo-preview-alert-4').fadeIn(300);
 });
})

</script>